<%--
  Created by IntelliJ IDEA.
  User: lwz
  Date: 2023/9/11
  Time: 18:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../static/js/Core_values.js"></script>

    <style>
        #sign-in, #sign-out {
            float: left;
            padding: 10px;
        }

        h3 {
            text-align: center;
        }

        .scrolling-text {
            white-space: nowrap; /* 防止文字换行 */
            animation: scroll 15s linear infinite; /* 动画属性 */
            float: left;
            color: red;

        }

        @keyframes scroll {
            0% {
                transform: translateX(0%);
            }
            /* 开始位置 */
            100% {
                transform: translateX(-100%);
            }
            /* 结束位置 */
        }


    </style>
</head>
<body>
<script src="../static/js/flower.js"></script>
<div id="app">
    <div id="content">
        <div id="icon">
            通报：
            <i class="fas fa-volume-up fa-2x"></i>
        </div>
        <div class="scrolling-text" v-model="scrollingText">

            {{ scrollingText }}
        </div>
    </div>
    <div id="myLeave" style="margin: 30px">
        <h3>个人请假情况</h3>
        <div v-if="ifShow">
            <template>
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="leaveSubmit" label="日期" width="180"></el-table-column>
                    <el-table-column prop="userRealName" label="姓名" width="180"></el-table-column>
                    <el-table-column prop="leaveInfo" label="请假理由"></el-table-column>
                    <el-table-column prop="leaveDays" label="天数"></el-table-column>
                    <el-table-column prop="leaveStatus" label="状态"></el-table-column>
                </el-table>
            </template>
        </div>
        <div v-if="ifFlag" style="text-align: center; padding: 20px;">
            没有查到内容
        </div>
    </div>
    <div id="late">
        <h3>每月中迟到次数最多的员工</h3>
        <template>
            <el-table :data="tableDataLate" stripe style="width: 100%">
                <el-table-column prop="settingDate" label="日期" width="180"></el-table-column>
                <el-table-column prop="userRealName" label="姓名" width="180"></el-table-column>
                <el-table-column prop="deptName" label="部门"></el-table-column>
                <el-table-column prop="settingLate" label="迟到次数"></el-table-column>
                <el-table-column prop="settingEarly" label="早退次数"></el-table-column>
                <el-table-column prop="settingLeave" label="请假次数"></el-table-column>
            </el-table>
        </template>
    </div>
    <div id="leave">
        <h3>每月中请假次数最多的员工</h3>
        <template>
            <el-table :data="tableDataLeave" stripe style="width: 100%">
                <el-table-column prop="settingDate" label="日期" width="180"></el-table-column>
                <el-table-column prop="userRealName" label="姓名" width="180"></el-table-column>
                <el-table-column prop="deptName" label="部门"></el-table-column>
                <el-table-column prop="settingLate" label="迟到次数"></el-table-column>
                <el-table-column prop="settingEarly" label="早退次数"></el-table-column>
                <el-table-column prop="settingLeave" label="请假次数"></el-table-column>
            </el-table>

        </template>
    </div>
    <div id="early">
        <h3>每月中早退次数最多的员工</h3>
        <template>
            <el-table :data="tableDataEarly" stripe style="width: 100%">
                <el-table-column prop="settingDate" label="日期" width="180"></el-table-column>
                <el-table-column prop="userRealName" label="姓名" width="180"></el-table-column>
                <el-table-column prop="deptName" label="部门"></el-table-column>
                <el-table-column prop="settingLate" label="迟到次数"></el-table-column>
                <el-table-column prop="settingEarly" label="早退次数"></el-table-column>
                <el-table-column prop="settingLeave" label="请假次数"></el-table-column>
            </el-table>

        </template>
    </div>

</div>

<script>
    new Vue({
        el: "#app",
        data: {
            tableData: [
                leaveDate = "",
                userRealName = "",
                leaveInfo = "",
                leaveDays = "",
                leaveStatus = "",
            ],
            ifShow: true,
            ifFlag: false,
            tableDateLeave: [
                settingDate = "",
                userRealName = "",
                dept_name = "",
                settingLeave = "",
                settingLate = "",
                settingEarly = "",
            ],
            tableDateEarly: [
                settingDate = "",
                userRealName = "",
                dept_name = "",
                settingLeave = "",
                settingLate = "",
                settingEarly = "",
            ],
            tableDateLate: [
                settingDate = "",
                userRealName = "",
                dept_name = "",
                settingLeave = "",
                settingLate = "",
                settingEarly = "",
            ],
            scrollingText: '',// 从数据库获取的文字内容
        },
        methods: {
            queryMyLeave() {
                var _this = this
                $.ajax({
                    url: "/attendance/myLeave",
                    type: "get",
                    dataType: "json",
                    contentType: "application/json",
                    data: {},
                    success: function (res) {
                        if (res.status === 200) {
                            _this.tableData = res.object;
                        } else {
                            _this.ifFlag = true
                            _this.ifShow = false
                        }
                    }
                })
            },
            queryLeave() {
                var _this = this
                $.ajax({
                    url: "/attendance/leave",
                    type: "get",
                    dataType: "json",
                    contentType: "application/json",
                    data: {},
                    success: function (res) {
                        if (res.status === 200) {
                            _this.tableDataLeave = res.object;
                        } else {
                            _this.ifFlag = true
                            _this.ifShow = false
                        }
                    }
                })
            },
            queryEarly() {
                var _this = this
                $.ajax({
                    url: "/attendance/early",
                    type: "get",
                    dataType: "json",
                    contentType: "application/json",
                    data: {},
                    success: function (res) {
                        if (res.status === 200) {
                            _this.tableDataEarly = res.object;
                        }

                    }
                })
            },
            queryLate() {
                var _this = this
                $.ajax({
                    url: "/attendance/late",
                    type: "get",
                    dataType: "json",
                    contentType: "application/json",
                    data: {},
                    success: function (res) {
                        if (res.status === 200) {
                            _this.tableDataLate = res.object;
                        }

                    }
                })
            },
            report() {
                var _this = this
                $.ajax({
                    url: "/attendance/report",
                    type: "get",
                    dataType: "json",
                    contentType: "application/json",
                    data: {},
                    success: function (res) {
                        if (res.status === 200) {

                            var str = "通报："
                            for (let i = 0; i < res.object.length; i++) {

                                if (res.object[i].settingLeave > 5) {
                                    str += res.object[i].deptName + "：" + res.object[i].userRealName + "，请假：" + res.object[i].settingLeave + "次；"
                                    _this.scrollingText = str
                                } else if (res.object[i].settingEarly > 5) {
                                    str += res.object[i].deptName + "：" + res.object[i].userRealName + "，早退：" + res.object[i].settingEarly + "次；"
                                    _this.scrollingText = str
                                } else if (res.object[i].settingLate > 5) {
                                    str += res.object[i].deptName + "：" + res.object[i].userRealName + "，迟到：" + res.object[i].settingLate + "次。"
                                    _this.scrollingText = str
                                }

                            }
                            str += "严重违反公司的相关制度，特此通报，望其他员工引以为戒！想干的就别给我迟到早退，不想干就滚，公司不差你这个人！"
                            _this.scrollingText = str
                        }

                    }
                })
            },
        },
        mounted: function () {
            this.queryLeave()
            this.queryLate()
            this.queryMyLeave()
            this.queryEarly()
            this.report()
        }
    })
</script>
</body>
</html>
